前面十篇都準備開發環境，這篇終於進到正式的 Android 開發，首先介紹的是鐵人賽的主題，也是這次 Mobile Development 最多人寫的 Jetpack Compose （以下簡稱 Compose）。
以往 Android XML Layout 需要 findXXX() + setXXX() 或是 binding 讓程式邏輯可以操作 UI 元件，但這種仰賴元件 ID 的方式沒辦法保證編譯時期的型別安全，一不小心用錯 ID 也要等到運行才能發覺。而 Compose 則是用 Kotlin 配合宣告式程式設計，讓 UI 與程式邏輯使用同一套語言，不用分別寫 XML 跟程式邏輯，全部用 Kotlin 一氣呵成，也不需要透過元件 ID 操作，直接像呼叫一般函式一樣傳遞參數就能顯示出畫面。

Activity 起手式

因為 Compose 不需要用到 AppCompat API，所以繼承 ComponentActivity 就好。
讓 Compose 元件顯示的方式跟以往類似，都是在 Activity.onCreate() 處理，不過這裡要使用 setContent() 來顯示宣告的元件。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(text = "Hello Android!")
        }
    }
}

Composable Function

Compose 藉由呼叫函式來「宣告」畫面與元件，這些 function 稱為 composable function，為了與一般函式區別，composable function 會以大駝峰命名法（upper camel case）命名。上面範例的 Text 就是一個內建的 composable function。

定義新的 composable function 很簡單，在平常的 function 加上 @Composable 就可以了。下方範例定義一個 Greeting 函式，可以傳入自訂字串並顯示文字。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Android")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

Preview Function

由於 Compose 不使用 layout editor，無法用以往 XML 的方式看到預覽畫面，所以有了 preview function 這個功能，它也是個 composable function，但多了 @Preview 標注，讓 Android Studio 可以顯示預覽畫面。不過預覽畢竟是預覽，運行環境不是完整的 Android 系統，所以會有一些限制，之後介紹 ViewModel 時會提到。
@Preview 標注也能傳入參數調整預覽的顯示設定，像是 showBackground 可以顯示預設背景，讓沒有背景色的元件能套用背景。

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    Greeting("Lorem ipsum")
}

可以透過右上角的 Code、Split、Design 切換鈕分別切換成程式碼、程式碼+預覽或預覽畫面

Modifier

Compose 的精隨在於 Modifier，Modifier 可以對元件調整大小、位置、新增點擊效果等等，達成各式各樣的進階操作，不過要注意它是有順序性的，先執行的會先套用。

@Composable
private fun MyBox() {
    Box(
        modifier = Modifier
            .padding(8.dp)
            .border(1.dp, Color.Black)
    ) {
        Box(
            modifier = Modifier
                .padding(6.dp)
                .border(1.dp, color = Color.Gray)
                .padding(4.dp)
        ) {
            Text(text = "Lorem ipsum")
        }
    }
}